<template>
  <div class="style__m-download___KV0aK">
    <div class="style__wrapper___1fTwc">
      <div class="main__m-main___2uUHP main__shrink___Uba7N">
        <div class="main__n-pc___3oNRI">
          <div class="main__title___1u4H7">在电脑上听</div>
          <img
            src="//p1.music.126.net/PGNd0EAtUgA7iRCWXPnUuA==/109951164207162781.png?param=800x0"
            class="main__img___2st-0"
          />
          <div class="main__type-tip___2Y-Am">
            <span
              ><i class="main__icon-tip___RlxL_ main__icon-mac___2FGu8"></i
            ></span>
            <span
              ><i class="main__icon-tip___RlxL_ main__icon-win___2Pwzt"></i
              >Windows</span
            >
          </div>
          <div class="main__button___1MzUb">下载电脑端</div>
        </div>
        <div class="main__n-mobile___2-BTD">
          <div class="main__title___1u4H7">在手机上听</div>
          <img
            src="//p1.music.126.net/sLtya87wVHWn-HWJ33oN4g==/109951164207180884.png?param=450x0"
            class="main__img___2st-0"
          />
          <div class="main__type-tip___2Y-Am">
            <span
              ><i class="main__icon-tip___RlxL_ main__icon-iphone___1U4-y"></i
            ></span>
            <span
              ><i class="main__icon-tip___RlxL_ main__icon-android___1MqTO"></i
              >Android</span
            >
          </div>
          <div class="main__button___1MzUb">
            <i class="main__icon-ncode___NRbaQ"></i>下载手机端
          </div>
        </div>
      </div>
      <div ref="tooltip">
         <div class="style__clients___iw5uL" @click="flag = !flag">
          <i class="style__icon-download___2aJYJ"></i>其他操作系统客户端
         </div>
         <div
          class="rc-tooltip rc-tooltip-placement-bottomRight"
          style="left: 824px; top: 64px"
          v-show="flag"
        >
          <div class="rc-tooltip-content">
            <div class="rc-tooltip-arrow"></div>
            <div class="rc-tooltip-inner">
              <div class="client-modal">
                <a class="btn aos" v-for="(item, index) in modal" :key="index">
                  <i :class="[item.icon]"></i>
                  <em class="f-ff2">{{ item.title }}</em>
                </a>
              </div>
            </div>
          </div>
         </div>
      </div>
    </div>
    <div class="dcnt__n-dncnt___1vUTq">
      <div class="f-cb dcnt__wrap___PIcYP dcnt__cnt1___1TT3G">
        <div class="dcnt__lt___QR1Sg">
          <h3 class="f-ff2 dcnt__tit___2uU9q">千万曲库 首首CD音质</h3>
          <p class="f-ff2 dcnt__des___2uVqU">
            囊括百万无损SQ音乐，你在用手机听歌时，<br />也能感受到纤毫毕现的CD音质，更能免费离线收听
          </p>
        </div>
        <div class="dcnt__rt___22OYK">
          <img
            src="//p1.music.126.net/KP4aN9umGMNnCS8iCgiV9w==/109951164206415504.jpg"
            alt="千万曲库  首首CD音质"
          />
        </div>
      </div>
    </div>
    <div class="dcnt__n-dncnt___1vUTq dcnt__n-dncnt2___15W95">
      <div class="f-cb dcnt__wrap___PIcYP dcnt__cnt2___Ho71r">
        <div class="dcnt__lt___QR1Sg">
          <img
            src="//p1.music.126.net/rpwYXqZt_UpO_de46JyYwQ==/109951164488922626.jpg"
            alt="千位明星  亲自推荐音乐"
          />
        </div>
        <div class="dcnt__rt___22OYK">
          <h3 class="f-ff2 dcnt__tit___2uU9q">千位明星 亲自推荐音乐</h3>
          <p class="f-ff2 dcnt__des___2uVqU">
            韩红，戴佩妮等<em>千位明星已入驻</em>，亲自创建私房歌单，录制独<br />家DJ节目，推荐他们心中的好音乐
          </p>
        </div>
      </div>
    </div>
    <div class="dcnt__n-dncnt___1vUTq">
      <div class="f-cb dcnt__wrap___PIcYP dcnt__cnt3___1Xlb8">
        <div class="dcnt__lt___QR1Sg">
          <h3 class="f-ff2 dcnt__tit___2uU9q">社交关系 发现全新音乐</h3>
          <p class="f-ff2 dcnt__des___2uVqU">
            你可以<em>关注明星</em>、DJ和好友，通过浏览他们的动态、收藏和<br />分享，发现更多全新好音乐
          </p>
        </div>
        <div class="dcnt__rt___22OYK">
          <img
            src="//p1.music.126.net/9CQFSDAZN7TcOWz7UNEqmQ==/109951164488924083.jpg"
            alt="社交关系  发现全新音乐"
          />
        </div>
      </div>
    </div>
    <div class="dcnt__n-dncnt___1vUTq">
      <div class="f-cb dcnt__wrap___PIcYP dcnt__cnt5___2YyX2">
        <div class="dcnt__lt___QR1Sg">
          <h3 class="f-ff2 dcnt__tit___2uU9q">听歌识曲 助你疯狂猜歌</h3>
          <p class="f-ff2 dcnt__des___2uVqU">
            歌曲很动听却不知道歌名，歌名在嘴边却想不起来……<br />用<em>听歌识曲</em>功能，几秒钟就知道歌名
          </p>
        </div>
        <div class="dcnt__rt___22OYK">
          <img
            src="//p1.music.126.net/MGGp3L7AerIVlskMkAk1HA==/109951164488904737.jpg"
            alt="听歌识曲  助你疯狂猜歌"
          />
        </div>
      </div>
    </div>
    <div class="style__n-qrcode___dg4uU style__iframe___2PxaS">
      <img
        src="//p1.music.126.net/wCRnpjXHpGRiq1c1uCkIFQ==/109951164246717547.png"
        alt="移动端下载"
      />
      <p>扫描二维码下载</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modal: [
        { title: "Android版", icon: "icon1" },
        { title: "iPhone版", icon: "icon2" },
        { title: "iPad版", icon: "icon3" },
        { title: "Mac版", icon: "icon4" },
        { title: "PC版", icon: "icon5" },
        { title: "UWP版", icon: "icon6" },
        { title: "WP版", icon: "icon7" },
        { title: "Linux版", icon: "icon8" },
      ],
      flag: false,
    };
  },
  mounted() {
    var _this = this;
    document.addEventListener("click", function (e) {
       if (_this.$refs.tooltip.contains(e.target)) return
              _this.flag = false
       
         
    });
  },
};
</script>

<style scoped>
@import url("./download.css");
</style>